import React from 'react'
import './index.scss';


function IndexList(props) {
  const indexList = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "p",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "#"
  ]



  const scrollToAnchor = (anchorName) => {
    console.log(anchorName)
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if (anchorElement) { anchorElement.scrollIntoView(); }
    }
  }
  return (
    <>
        <ol className='index_list_sidebar'>
          {
            indexList.map((item) => {
              return (
                <li key={item} onClick={() => scrollToAnchor(item)} className='index_list_sidebar_item'>
                  {item}
                </li>
              )
            })
          }
        </ol>

          {props.children}

    </>
  )
}



export default IndexList





// 调用时如下
// 建议数据格式:
// const indexListData = [
//   {
//     title: "A",
//     items: [
//       {
//         name: <>AAA</>
//       },
//       {
//         name: <>AAA</>,
//       },
//     ]
//   },
//   {
//     title: "B",
//     items: [
//       {
//         name: "好友名字",
//         avatar: "/images/HeadportraitStu.png",
//         myComponents: ''
//       }
//     ]
//   }
// ]

// <IndexList >

// {
//   arr.map(item => {
//   return (
//     这里的title就是 A B C D 
//     <li key={...} id={title}></li>
//   )
//    }
// })
// }
// </IndexList>
// 便利的时候每一个 A B C D E .. 的包裹元素必须有一个id=A  id=B... 
